<template>
  <div class="rightmenu">
      <div class="widget widget_login" v-if="!session_id && !loginRegisterDialogVisible">
          <el-card  class="box-card" >
            <loginRegister ></loginRegister>
          </el-card>
      </div>
      <el-dialog
        title=""
        :visible.sync="loginRegisterDialogVisible"
        width="50%"
        center>
        <loginRegister ></loginRegister>
      </el-dialog>
      <div class="widget widget_hot">
        <div class="hot">
          <el-card class="box-card" >
            <div v-for="(item,index) in hotarticleList" @mouseenter="onMouseOver(index)"
                 @mouseleave="onMouseOut()"  @click="goRoute(index)"  :class="active == index ? 'text_item_active' :'text_item'">
                <i :class="item.icon"></i>
                <span>{{item.title}}</span>
                <div v-if="item.num != 0 " class="text_num">10</div>
            </div>
          </el-card>
        </div>
      </div>
      <div class="widget widget_sentence">
        <div class="link">
          <el-card class="box-card">
            <div slot="header">
              <span>资讯推荐</span>
              <el-button @click.native="changeMath" style="float: right; padding: 3px 0" type="text">
                <i class="el-icon-refresh" style="padding-right:1px"></i>
                换一换
              </el-button>
            </div>
            <div v-loading="loading">
              <div class="first_news" v-if="first_news">
                <img :src="first_news.image_url">
                <h2>{{first_news.title}}</h2>
              </div>
              <div v-for="(item,index) in newList"  @click="goDetail(index)" :key="index" class="news_item">
                 <h2>{{item.title}}</h2>
                 <div>
                   <span>{{item.create_time | formatTime}}</span>
                   <span class="click_num">
                     <i class="el-icon-view"></i>
                     {{item.click}}
                   </span>
                 </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <div class="widget widget_sentence">
     <!--    <div class="link">
          <h3>关注我们</h3>
        </div> -->
        <div class="">
          <el-card :body-style="{ padding: '0px' }">
            <div style="padding: 14px;">
              <span style="display: flex; align-items:center">
                <strong style="width: 30%">QQ联系：</strong>
                <a href="tencent://message/?uin=1685332959&Site=&Menu=yes" style="cursor: pointer">
                  <img src="../../assets/images/qqchat.png">
                </a>
              </span>
              <!-- <span style="display: flex; align-items:center">
                <strong style="width: 30%">微信关注：</strong>
                <a>
                  <img src="../../assets/images/qqchat.png">
                </a>
              </span> -->
              <div class="bottom clearfix">
                <time class="time"></time>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <div style="text-align: center">
        <a href="http://www.beian.miit.gov.cn/">粤ICP备19066751号</a>
   <!--      <p>京公网安备11010802026719号</p> -->
      </div>
    </div>
</template>

<script>
import loginRegister from '@/components/login-register'
export default {
  components: {
     loginRegister
  },
  data () {
    return {
      loginRegisterDialogVisible: false,
      active:-1,
      session_id:'',
      page:1,
      size:6,
      MaxPage:0,
      loading: false,
      content:'',
      first_news:{},
      hotarticleList: [
        {
          icon:'el-icon-edit-outline',
          title:'写文章',
          url:"/createArticle"
        }, 
        {
          icon:'el-icon-upload',
          title:'资源中心',
          url:"/createArticle"
        },
        {
          icon:'el-icon-document',
          title:'技术分享',
          url:"/createArticle"
        },
        {
          icon:'el-icon-download',
          title:'模板下载',
          url:"/createArticle"
        },
      ],
      newList:[],
      allNewslist:[],
      activeName: 'first',
      hotName: '1',
    }
  },
  created() {

  },
  watch: {

  },
  mounted () {
    this.session_id = sessionStorage.getItem('session');
    this.getNews()
  },
  computed: {

  },
  methods: {
    onMouseOver(index) {
      this.active = index
    },
    onMouseOut(index) {
      this.active = -1
    },
    goRoute(index){
      switch(index){
        case 0 :
          if(this.session_id){
            this.$router.push({
              path: '/createArticle',
            });
          }else{
            this.loginRegisterDialogVisible = true
          }
        break;
      }
    },
    getNews() {
      this.loading = true
      let params = {
        page: this.page,
        per_page: this.size,
      };
      this.$api.getNews(params)
       .then(res => {
         console.log(res)
          this.loading = false
          this.MaxPage = Math.ceil(res.data.total / this.size)
          if(res.data.data.length < this.size){
            this.page = Math.ceil(Math.random()*this.MaxPage);  
            this.getNews()
          }else{
            this.allNewslist = res.data.data
            if(this.allNewslist[0].image_url){
              this.allNewslist.sort(() => Math.random()  - 0.5);
              this.newList = this.allNewslist.slice(1,6)
              this.first_news = this.allNewslist[0]
            }else{
              this.page = Math.ceil(Math.random()*this.MaxPage);  
              this.getNews()
            }
          }
       })
    },
    changeMath(){
       console.log(this.newList)
       this.page = Math.ceil(Math.random()*this.MaxPage);  
       this.getNews()
    },
    // 查看文章详情
    goDetail(index) {
        let articleId = this.newList[index].id ;
        this.$router.push({
          path: '/newsdetails',
          query: {
            articleId: articleId,
          }
        });
    },
  }
}
</script>

<style lang="less" scoped>
  @import './rightMenu.less';
</style>
